<template>
  <el-col v-if="item.display" :span="4" style="margin: 5px">
    <el-button :class="item.checked?'sea-button-checked': 'el-button-default'" :type="type" @click="click">
      <el-avatar icon="el-icon-user-solid"></el-avatar>
      <article>
        <p>支行行长</p>
        <p>
          <i v-if="item.checked" class="fa fa-check-circle"></i>
          <i v-if="!item.checked" class="fa fa-times-circle"></i>
          城西-何其祥
        </p>
      </article>
    </el-button>
  </el-col>
</template>

<script>
export default {
    name: "UserItem"
    , props: {
        // 表单组件列表
        item: {type: Object},
        // 序号
        index: {type: Number},
        // 节点选中事件
        onchange: {type: Function}
    }
    , data() {
        return {
            checked: true,
            type: undefined
        }
    }
    , created() {

    }
    , methods: {
        click: function () {
            this.onchange(this.item, this.index);
        }
    }
}
</script>
<style scoped>
.sea-button-checked {
    color: #337ab7;
    width: 100%;
    font-weight: bold;
    border: 1px solid #337ab7;
}

.el-button-default {
    color: lightgray;
    width: 100%;
    border: 1px solid lightgray;
}

.el-button-default:focus {
    color: lightgray;
    width: 100%;
    border: 1px solid lightgray;
}
</style>